<template>
	<view v-if="goods_info.goods_name" class="goods-detail-container">
		<!-- //轮播图区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item, index) in goods_info.pictures" :key="index">
				<image :src="item.image_src"></image>
			</swiper-item>
		</swiper>
		
		
		<!-- 商品信息区域 -->
		<view class="goods-info-box">
			<!-- 商品价格 -->
			<view class="goods-price">￥{{goods_info.goods_price}}</view>
			<!-- 商品信息 -->
			<view class="goods-info-body">
				<!-- 商品名称 -->
				<view class="name">
					{{goods_info.goods_name}}
				</view>
				<view class="favi">
					<!-- <uni-icons type="hand-down" size="20" @click="changeLikedAmountDown"></uni-icons>
					{{goods_info.notLiked_amount}} -->
					<!-- 点赞的图标 -->
					<uni-icons type="hand-up" size="25" @click="changeLikedAmountUp"
					:style="choseValue == 'choseone'?mapStyle:normalStyle"
					></uni-icons>
					<!-- 商品的数量 -->
					{{goods_info.liked_amount}}
				</view>
			</view>
			
			<view class="goods-introduce">
				这里是商品介绍内容！
				<br>(可以自定义这部分的内容)<br>
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
				这里是商品介绍内容！
			</view>
			
		</view>
		<!-- 商品导航区域 -->
		<view class="goods-nav">
			<uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
		</view>
	</view>
	
</template>

<script>
	import { mapState, mapMutations, mapGetters } from 'vuex'
	
	export default {
		computed: {
			...mapState('m_cart', []),
			...mapGetters('m_cart', ['total'])
		},
		watch: {
			// total(newVal) {
			// 	const res = this.options.find(x => x.text === '购物车')
			// 	console.log(res)
			// 	if (res) {
			// 		//如果对应的数值改变，则进行对应的修改
					
			// 		res.info = newVal
			// 		console.log(newVal)
			// 	}
			// }
			total: {
				handler(newVal) {
					const res = this.options.find(x => x.text === '购物车')
					if (res) {
						//如果对应的数值改变，则进行对应的修改	
						res.info = newVal
						// console.log(newVal)
					}
				},
				immediate: true
			}
		},
		data() {
			return {
				// 商品信息
				"goods_info": {},
				
				//导航栏信息
				options: [	
							{
								icon: 'headphones',
								text: '客服'
							},  
							{
								icon: 'cart',
								text: '购物车',
								info: 0
							}],
				buttonGroup: 
				[		
						{
					      text: '加入购物车',
					      backgroundColor: '#ff0000',
					      color: '#fff'
					    },
					    {
					      text: '立即购买',
					      backgroundColor: '#ffa200',
					      color: '#fff'
					    }
					]
			};
		},
		onLoad(options) {
			// console.log(options)
			this.getGoodsInfo()
		},
		methods: {
			...mapMutations('m_cart', ['addToCart']),
			
			getGoodsInfo() {
				//进行异步请求获取对应的商品详情
				//此步骤目前只是模拟静态的数据
				this.goods_info = {
					"goods_id": 395,
					"cat_id": 123,
					"goods_name": "测试的商品名称",
					"goods_count": 1,
					"goods_price": 98,
					"liked_amount": 123,
					"notLiked_amount": 12,
					"goods_number": 15,
					"goods_weight": 123,
					"goods_small_logo": 'https://s3.bmp.ovh/imgs/2022/03/26a08587f0f1599c.png',
					"goods_simple_introduce": "这里写的是商品的简介信息",
					"goods_introduce":"这是这个商品的介绍信息。目前通过该方式进行模拟，后期可以根据从后端请求的数据进行对应的修改,即可",
					"pictures": [
						{
							"image_src" : "../../static/swiperImage/1.png",
							"open_type" : "navigate",
							"goods_id" : 129,
							"navigator_id" : "/pages/goods_detail/main?goods_id=129"
						},
						{
							"image_src" : "../../static/swiperImage/2.png",
							"open_type" : "navigate",
							"goods_id" : 130,
							"navigator_id" : "/pages/goods_detail/main?goods_id=130"
						}
					]
				
				}
			},
			changeLikedAmountUp() {
				//每个用户每天只能点一次赞
				
				this.goods_info.liked_amount++;
			},
			changeLikedAmountDown() {
				//每个用户每天只能点一次赞
				
				this.goods_info.notLiked_amount++;
			},
			//点击客服，或者购物车，对应的操作，
			onClick (e) {
				if (e.content.text === '购物车') {
					uni.switchTab({
						url:'../../pages/Cart/Cart'
					})
				}
				if (e.content.text === '客服') {
					
				}
				// console.log(e)
				// uni.showToast({
				//   title: `点击${e.content.text}`,
				//   icon: 'none'
				// })
			},
			buttonClick (e) {
				if (e.content.text === '加入购物车') {
					//先进性将数据封装成我们调用函数所需要的对象
					// {goods_id, goods_name, goods_price, goods_count, goods_state， goods_small_logo}
					const goods = {
						goods_id: this.goods_info.goods_id,
						goods_name: this.goods_info.goods_name,
						goods_price: this.goods_info.goods_price,
						goods_small_logo: this.goods_info.goods_small_logo,
						goods_count: 1,
						goods_state: true,
						
					}
					this.addToCart(goods)
				}
			}
		}
	}
</script>

<style lang="scss">
swiper{
	height: 450rpx;
	image{
		width: 100%;
	}
}

.goods-info-box {
	padding: 10px;
	padding-right: 0;
	.goods-price {
		color: #C00000;
		font-size: 18px;
		margin: 10px 0 10px 0;
	}
	.goods-info-body {
		display: flex;
		justify-content: space-between;
		.name {
			font-size: 14px;
			margin-right: 10px;
		}
		.favi {
			display: flex;
			align-items: center;

			width: 70px;
			font-size: 12px;
			border-left: 1px solid #efefef;
			color: gray;
		}
	}
	
}

.goods-introduce {
	padding-top: 20px;
}
.goods-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}

.goods-detail-container{
	padding-bottom: 50px;
}
</style>
